<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bfc</title>
  <style>
  .same-bfc {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
  }

  .container {
    overflow: hidden;
  }

  #left {
    border: 1px solid #ccc;
    float: left;
    width: 50%;
    margin: -1px;
    height: 500px;
    padding: 10px;
    box-sizing: border-box;
  }


  #right {
    border: 1px solid #FF0000;
    float: right;
    width: 50%;
    box-sizing: border-box;
    margin: -1px;
    height: 500px;
    padding: 10px;
  }

  p, .with-bfc {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
    box-sizing: border-box;

  }

  </style>
</head>

<body>
<!-- without bfc -->
<div id="left">
  <div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
  </div>
</div>

<!-- with bfc-->
<div id="right">
  <div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
  </div>
</div>

</body>
</html>
